<template>
  <view class="container">
    <titleBar :titleText='"提现申请"' :pageForm='"withdraw"' @gopath='goLog'>></titleBar>

    <view class="form">

      <u-form :model="form" ref="uForm" label-width="140rpx">

        <u-form-item label="提现方式" prop="type" required>
          <u-radio-group v-model="form.type" @change="radioGroupChange">
            <u-radio
                @change="radioChange"
                v-for="(item, index) in typeList" :key="index"
                :name="item.name"
                :disabled="item.disabled"
            >
              {{ item.name }}
            </u-radio>
          </u-radio-group>
        </u-form-item>
        <u-form-item label="姓名" prop="name" required>
          <u-input v-model="form.name"/>
        </u-form-item>

        <u-form-item label="账号" prop="account" required>
          <u-input v-model="form.account"/>
        </u-form-item>

        <u-form-item label="提现金额" prop="money" required>
          <u-input type="float" v-model="form.money"/>
          <text>当前可提现：{{ enableMoney }}</text>
        </u-form-item>
        <u-form-item label="手续费" prop="fee">
          <u-input disabled v-model="form.moneyFee"/>
          <text>提现费率：{{ fee }} %</text>
        </u-form-item>
      </u-form>
      <u-button class="sub" @click="submit">提交</u-button>
    </view>
  </view>
</template>

<script>


import titleBar from '@/components/backTitlebar.vue';

export default {
  components: {
    titleBar
  },

  data() {
    return {
      typeList: [],
      enableMoney: 0,
      fee: 0,
      form: {
        name: '',
        money: 0,
        type: '支付宝',
        account: '',
        moneyFee: 0,
      }

    };
  },

  onShow() {

  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.ready()
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },
  watch: {
    'form.money': function (newVal, oldVal) {
      this.form.moneyFee = (this.fee / 100 * newVal).toFixed(2);
    }
  },
  methods: {
    // 选中某个单选框时，由radio时触发
    radioChange(e) {
      this.form.type = e
      //console.log(e);
    },
    // 选中任一radio时，由radio-group触发
    radioGroupChange(e) {
      //console.log(e);
    },
    ready() {
      this.$http.get('union/api.balance/withdraw_ready', {}, true)
          .then(res => {
            this.enableMoney = res.money;
            this.fee = res.fee;
            this.typeList = res.typeList
          }).catch(err => {

      })
    },
    goLog() {
      uni.navigateTo({
        url: "/pages/mine/balance/withdraw_log"
      })
    },
    submit: function () {
      this.$refs.uForm.validate(valid => {
        if (valid) {
          if (!this.form.type) {
            return uni.showToast({title: "请选择类型", icon: 'none'})
          }
          if (!this.form.name) {
            return uni.showToast({title: '请填写真实姓名', icon: 'none'})
          }
          if (!this.form.account) {
            return uni.showToast({title: '请填写账号', icon: 'none'})
          }
          if (Number(this.form.money) < 1) {
            return uni.showToast({title: '提现至少1元', icon: 'none'})
          }
          if (Number(this.form.money) > Number(this.enableMoney)) {

            return uni.showToast({title: '超过可最大提现金额', icon: 'none'})
          }
          this.$http.post('union/api.balance/withdraw', this.form, 'application/json')
              .then((res) => {
                uni.showModal({
                  title: '提示',
                  content: '提交申请成功',
                  success: function (res) {
                    if (res.confirm) {
                      uni.navigateBack(1);

                    } else if (res.cancel) {
                      console.log('用户点击取消');
                    }
                  }
                });
              }).catch(err => {

          })

        } else {
          console.log('验证失败');
        }
      });

    },

  }
}
</script>

<style scoped lang='scss'>
.container {
  background: white;
  padding: 16rpx;

  .form {
    padding: 26rpx;
  }

  .sub {
    margin-top: 100rpx;
  }
}


</style>
